<template>
  <view class="login-page">
    <!-- 背景图片 -->
    <image class="background-image" src="../../static/login/login-bg.png" mode="aspectFill"></image>

    <!-- 自定义导航栏 -->
    <up-navbar title="登录授权" :bgColor="navbarBgColor" height="44" fixed placeholder :autoBack="true">
      <template #left>
        <up-icon name="arrow-left" color="#333" size="20" @click="goBack"></up-icon>
      </template>
    </up-navbar>

    <!-- 登录内容区域 -->
    <view class="login-content">
      <!-- 顶部Logo和标题 -->
      <view class="header-section">
        <view class="logo-container">
          <!-- 使用图片logo替换原来的自定义logo -->
          <image class="app-logo" src="../../static/login/login-logo.png" mode="aspectFit"></image>
        </view>
        <view class="title-section">
          <text class="main-title">欢迎来到鲁园艺术中心</text>
          <text class="sub-title">传承中华书法艺术，共享文化精髓</text>
        </view>
      </view>

      <!-- 登录按钮区域 -->
      <view class="login-section">
        <!-- 微信登录按钮 -->
        <view class="login-btn wechat-login" @click="handleWechatLogin" :class="{ loading: isLoading }">
          <view class="btn-content">
            <up-loading-icon v-if="isLoading" color="#fff" size="20"></up-loading-icon>
            <up-icon v-else name="weixin-fill" color="#fff" size="24"></up-icon>
            <text class="btn-text">{{ isLoading ? '登录中...' : '微信快速登录' }}</text>
          </view>
        </view>

        <!-- 手机号登录按钮 -->
        <!-- <view class="login-btn phone-login" @click="handlePhoneLogin">
          <view class="btn-content">
            <up-icon name="phone" color="#333" size="24"></up-icon>
            <text class="btn-text">手机号登录</text>
          </view>
        </view> -->

        <!-- 游客模式 -->
        <view class="guest-mode" @click="handleGuestMode">
          <text class="guest-text">暂不登录，以游客身份浏览</text>
        </view>
      </view>

      <!-- 登录提示 -->
      <view class="login-tips">
        <up-notice-bar text="为保障您的账户安全，请使用微信授权登录" mode="link" :speed="80" :disable-touch="false" fontSize="24rpx"
          leftIcon="info-circle" color="#666" bgColor="#f0f0f0"></up-notice-bar>
      </view>

      <!-- 服务条款 -->
      <view class="terms-section">
        <text class="terms-text">
          登录即表示同意
          <text class="terms-link" @click="showUserAgreement">《用户协议》</text>
          和
          <text class="terms-link" @click="showPrivacyPolicy">《隐私政策》</text>
        </text>
      </view>
    </view>

    <!-- 用户协议弹窗 -->
    <up-popup :show="showAgreement" mode="center" :round="true" width="650rpx" height="800rpx"
      @close="showAgreement = false">
      <view class="agreement-modal">
        <view class="modal-header">
          <text class="modal-title">用户协议</text>
          <up-icon name="close" @click="showAgreement = false" size="20"></up-icon>
        </view>
        <scroll-view class="modal-content" scroll-y>
          <view class="agreement-content">
            <text class="agreement-text">
              欢迎使用书法艺术馆应用！在您使用我们的服务前，请仔细阅读并理解本用户协议。

              1. 服务说明
              书法艺术馆致力于为用户提供优质的书法作品展示和学习交流平台。

              2. 用户账户
              您需要创建账户来使用部分服务功能。请确保提供真实、准确的信息。

              3. 用户行为规范
              请文明使用平台，不发布违法违规内容，尊重他人知识产权。

              4. 隐私保护
              我们重视您的隐私，将按照隐私政策保护您的个人信息。

              5. 免责声明
              平台仅提供信息展示服务，对内容的准确性不承担责任。

              6. 协议变更
              我们保留随时修改本协议的权利，修改后将及时通知用户。

              如有疑问，请联系客服。
            </text>
          </view>
        </scroll-view>
        <view class="modal-footer">
          <up-button type="primary" text="我已阅读" @click="showAgreement = false"></up-button>
        </view>
      </view>
    </up-popup>

    <!-- 隐私政策弹窗 -->
    <up-popup :show="showPrivacy" mode="center" :round="true" width="650rpx" height="800rpx"
      @close="showPrivacy = false">
      <view class="agreement-modal">
        <view class="modal-header">
          <text class="modal-title">隐私政策</text>
          <up-icon name="close" @click="showPrivacy = false" size="20"></up-icon>
        </view>
        <scroll-view class="modal-content" scroll-y>
          <view class="agreement-content">
            <text class="agreement-text">
              本隐私政策说明我们如何收集、使用、存储和保护您的个人信息。

              1. 信息收集
              我们可能收集您的昵称、头像、设备信息等，用于提供个性化服务。

              2. 信息使用
              您的信息仅用于改善服务体验，不会用于其他商业目的。

              3. 信息共享
              除法律要求外，我们不会向第三方分享您的个人信息。

              4. 信息安全
              我们采用行业标准的安全措施保护您的个人信息。

              5. 您的权利
              您有权查看、修改、删除您的个人信息。

              6. 联系我们
              如对隐私政策有疑问，请通过客服联系我们。

              本政策的最终解释权归书法艺术馆所有。
            </text>
          </view>
        </scroll-view>
        <view class="modal-footer">
          <up-button type="primary" text="我已阅读" @click="showPrivacy = false"></up-button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { wechatLogin } from '@/utils/auth.js'

const navbarBgColor = ref('#f8f8f8')
const isLoading = ref(false)
const showAgreement = ref(false)
const showPrivacy = ref(false)

// 返回上一页
const goBack = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    uni.navigateBack()
  } else {
    uni.switchTab({
      url: '/pages/user/index'
    })
  }
}

// 微信登录
const handleWechatLogin = async () => {
  isLoading.value = true
  try {
    console.log('开始微信登录...')
    // 调用封装好的微信登录方法
    const result = await wechatLogin()
    isLoading.value = false
    if (result.success) {
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })
      // 延迟跳转回用户中心
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/user/index'
        })
      }, 1500)
    } else {
      console.error('登录失败:', result.message)
      uni.showModal({
        title: '登录失败',
        content: result.message,
        showCancel: false,
        confirmText: '确定'
      })
    }
  } catch (error) {
    console.error('登录异常', error)
    isLoading.value = false

    let errorMsg = '登录过程中发生异常，请重试'
    if (error.message) {
      errorMsg = error.message
    }
    uni.showModal({
      title: '登录异常',
      content: errorMsg,
      showCancel: false,
      confirmText: '确定'
    })
  }
}

// 手机号登录
const handlePhoneLogin = () => {
  uni.showToast({
    title: '手机号登录功能开发中',
    icon: 'none'
  })
}

// 游客模式
const handleGuestMode = () => {
  // 设置游客模式标识
  const guestInfo = {
    avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132',
    nickname: '游客用户',
    isLoggedIn: false,
    isGuest: true,
    loginTime: new Date().getTime()
  }

  uni.setStorageSync('userInfo', JSON.stringify(guestInfo))

  uni.showToast({
    title: '已进入游客模式',
    icon: 'success'
  })

  setTimeout(() => {
    uni.reLaunch({
      url: '/pages/user/index'
    })
  }, 1500)
}

// 显示用户协议
const showUserAgreement = () => {
  showAgreement.value = true
}

// 显示隐私政策
const showPrivacyPolicy = () => {
  showPrivacy.value = true
}

onMounted(() => {
  // 页面加载完成后的初始化逻辑
  console.log('登录页面加载完成')
})
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  position: relative;
  overflow: hidden;

  // 背景图片
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
}

.login-content {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 240rpx);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

// 头部区域
.header-section {
  text-align: center;
  margin-bottom: 80rpx;
  margin-top: 60rpx;

  .logo-container {
    margin-bottom: 40rpx;
    animation: bounceIn 1s ease-out;

    // 图片logo样式
    .app-logo {
      width: 160rpx;
      height: 160rpx;
      border-radius: 32rpx;
      // box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease;
      margin: 0 auto;

      &:hover {
        transform: scale(1.05) rotate(5deg);
      }
    }
  }

  .title-section {
    animation: fadeInUp 1s ease-out 0.3s both;

    .main-title {
      display: block;
      font-size: 52rpx;
      font-weight: 700;
      color: #000000;
      margin-bottom: 16rpx;
      text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
      letter-spacing: 2rpx;
    }

    .sub-title {
      display: block;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.9);
      font-weight: 300;
    }
  }
}

// 登录区域
.login-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 40rpx;
  animation: fadeInUp 1s ease-out 0.6s both;

  .login-btn {
    width: 80%;
    height: 108rpx;
    border-radius: 54rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32rpx auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;

    // 添加光泽效果
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.5s ease;
    }

    &:active {
      transform: scale(0.96) translateY(2rpx);
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
    }

    &:hover::before {
      left: 100%;
    }

    &.loading {
      opacity: 0.8;

      .btn-content {
        animation: pulse 1.5s infinite;
      }
    }

    .btn-content {
      display: flex;
      align-items: center;
      gap: 20rpx;

      .btn-text {
        font-size: 34rpx;
        font-weight: 600;
        letter-spacing: 1rpx;
      }
    }

    &.wechat-login {
      background: linear-gradient(135deg, #1aad19, #00d100, #0bb20c);
      background-size: 200% 200%;
      animation: gradientShift 3s ease infinite;

      .btn-text {
        color: #fff;
      }
    }

    &.phone-login {
      background: rgba(255, 255, 255, 0.95);
      border: 2rpx solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(10rpx);

      .btn-text {
        color: #333;
      }
    }
  }

  .guest-mode {
    text-align: center;
    padding: 32rpx 0;
    animation: fadeIn 1s ease-out 1s both;

    .guest-text {
      font-size: 30rpx;
      color: rgba(117, 117, 117, 0.8);
      text-decoration: underline;
      transition: color 0.3s ease;

      &:active {
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}

// 登录提示区域
.login-tips {
  margin: 20rpx 0 40rpx;
  animation: fadeIn 1s ease-out 1.2s both;
}

// 服务条款区域
.terms-section {
  text-align: center;
  padding: 20rpx 0;
  animation: fadeIn 1s ease-out 1.2s both;

  .terms-text {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;

    .terms-link {
      color: rgba(255, 255, 255, 0.9);
      text-decoration: underline;
      font-weight: 500;
      transition: color 0.3s ease;

      &:active {
        color: #fff;
      }
    }
  }
}

// 弹窗样式
.agreement-modal {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx;
    border-bottom: 1rpx solid #f0f0f0;
    background: linear-gradient(135deg, #f8f9fa, #fff);

    .modal-title {
      font-size: 36rpx;
      font-weight: 700;
      color: #333;
      letter-spacing: 1rpx;
    }
  }

  .modal-content {
    flex: 1;
    padding: 40rpx;
    background: #fafafa;

    .agreement-content {
      .agreement-text {
        font-size: 28rpx;
        color: #444;
        line-height: 1.8;
        text-align: justify;
      }
    }
  }

  .modal-footer {
    padding: 40rpx;
    border-top: 1rpx solid #f0f0f0;
    background: #fff;
  }
}

// 动画定义
@keyframes brushMove {

  0%,
  100% {
    transform: rotate(-15deg) translateY(0);
  }

  50% {
    transform: rotate(-10deg) translateY(-3rpx);
  }
}

@keyframes dotPulse {

  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-50rpx);
  }

  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10rpx);
  }

  70% {
    transform: scale(0.9) translateY(0);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(60rpx);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

// 响应式设计
@media (max-width: 750rpx) {
  .header-section {
    .logo-container .app-logo {
      width: 140rpx;
      height: 140rpx;
    }

    .title-section .main-title {
      font-size: 46rpx;
    }
  }

  .login-section .login-btn {
    height: 96rpx;

    .btn-content .btn-text {
      font-size: 32rpx;
    }
  }
}
</style>
